
<html>

<head>

  <title>BOX JOINT - Tool</title>

  <link href='net_okimi_boxjoint.css' rel='stylesheet' type='text/css' media='screen'>

  <script language="javascript">

    var faceLength = 0;
    var unit = "";



    function  showTab_SelectFirstFace() {
      document.getElementById("Tab_SelectFirstFace").style.display = 'block';
      document.getElementById("Tab_SelectFirstEdge").style.display = 'none';
      document.getElementById("Tab_SelectSecondeEdge").style.display = 'none';
      document.getElementById("Tab_EnterValues").style.display = 'none';
    }


    function  showTab_SelectFirstEdge() {
      document.getElementById("Tab_SelectFirstFace").style.display = 'none';
      document.getElementById("Tab_SelectFirstEdge").style.display = 'block';
      document.getElementById("Tab_SelectSecondeEdge").style.display = 'none';
      document.getElementById("Tab_EnterValues").style.display = 'none';
    }


    function  showTab_SelectSecondeEdge() {
      document.getElementById("Tab_SelectFirstFace").style.display = 'none';
      document.getElementById("Tab_SelectFirstEdge").style.display = 'none';
      document.getElementById("Tab_SelectSecondeEdge").style.display = 'block';
      document.getElementById("Tab_EnterValues").style.display = 'none';
    }

    
    function  showTab_EnterValues( fFaceLength, sUnit ) {
      document.getElementById("Tab_SelectFirstFace").style.display = 'none';
      document.getElementById("Tab_SelectFirstEdge").style.display = 'none';
      document.getElementById("Tab_SelectSecondeEdge").style.display = 'none';
      document.getElementById("Tab_EnterValues").style.display = 'block';

      // Save the face length
      faceLength = fFaceLength;
      unit = sUnit;
      
      // Change the sub title
      document.getElementById("SubTitle").innerHTML = "The face length is : " + faceLength + unit;
      JointNumberCalculation();

    }


    function  JointNumberCalculation() {
      
      if ( document.getElementById("JointNumber").value == 0 ) return;


      document.getElementById("JointWidth").value = faceLength / document.getElementById("JointNumber").value;

    }


    function  JointWidthCalculation() {

      if ( document.getElementById("JointWidth").value == 0 ) return;


      document.getElementById("JointNumber").value = faceLength / document.getElementById("JointWidth").value;

    }


    function  Validation() {

      if ( document.getElementById("JointNumber").value <= 0 ) {
        alert( 'Joint number value is null' );
        return;
      }

      if ( document.getElementById("JointWidth").value <= 0 ) {
        alert( 'Joint width value is null' );
        return;
      }

      if ( document.getElementById("JointHeight").value <= 0 ) {
        alert( 'Joint height value is null' );
        return;
      }

      // Send to Sketchup values
      location = 'skp:Validation@' + document.getElementById("JointNumber").value  + ";" + document.getElementById("JointHeight").value + unit;

    }


  </script>

</head>



<body>

  <div style="height:100px"></div>

  <!-- Help 1 - Select the first face -->
  <div id="Tab_SelectFirstFace" style="display:none;">
    <hr/>
    <h1>First time : Select a face</h1>
    <img src="images\help1.gif"></img>
  </div>


  <!-- Help 2 - Select the first edge -->
  <div id="Tab_SelectFirstEdge" style="display:none;">
    <hr/>
    <h1>Then : Select the first edge</h1>
    <img src="images\help2.gif"></img>
  </div>
  
  
  <!-- Help 3 - Select the seconde edge -->
  <div id="Tab_SelectSecondeEdge" style="display:none;">
    <hr/>
    <h1>Finally : Select the seconde edge</h1>
    <img src="images\help3.gif"></img>
  </div>
  

  <!-- Input - Select values -->
  <div id="Tab_EnterValues" style="display:none;">
    <hr/>
    <h1>Enter values</h1>
    <img src="images\help4.gif"></img>    
    <form>
      <h2 id="SubTitle"></h2>
      <b>Joint number </b><input type="text" id="JointNumber" name="JointNumber" value="10" onchange="JointNumberCalculation()"> or 
      <b>Joint width </b><input type="text" id="JointWidth" name="JointWidth" onchange="JointWidthCalculation()"><br>
      <b>Joint height </b><input type="text" id="JointHeight" name="JointHeight" value="0"><br>
      <input type="button" value="Validation" onclick="Validation()" >
    </form>
  </div>


</body>

</html>
